<template>
	<view class='popup-box'>
		
		<!-- 弹出层 -->
		<view :catchtouchmove="isShow" :class="['scroll-popup', (animation && !typeData) ? 'scroll-animation' : '']"
			:style="scrollPopup">
			<!-- 自定义宽度，自定义背景色，自定义圆角 -->
			<scroll-view class="scroll-box" :style="scrollBox" scroll-y scroll-with-animation :show-scrollbar='false'>
				<view class="close-btn" @click.stop="close()">
					<image src="/static/img/close_block.png"></image>
				</view>
				<slot></slot>
			</scroll-view>
		</view>
		<!-- 遮罩层 -->
		<view v-show="isShow" :catchtouchmove="isShow" @click.stop="isMask ? close() : ''" class="scroll-mask"></view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否开启动画
			animation: {
				type: Boolean,
				default: true,
			},
			//是否点击阴影关闭
			isMask: {
				type: Boolean,
				default: true,
			},
			//是否开启安全条
			safeArea: {
				type: Boolean,
				default: true,
			},
			//圆角，单位rpx
			radius: {
				type: String,
				default: '0rpx',
			},
			//弹出方向
			type: {
				type: String,
				default: 'bottom',
			},
			//宽
			width: {
				type: String,
				default: 'auto',
			},
			//高
			height: {
				type: String,
				default: 'auto',
			},
			//背景色
			bgColor: {
				type: String,
				default: '#FFFFFF',
			},
		},
		data() {
			return {
				isShow: false,
				typeData: '',
			};
		},
		// 计算属性
		computed: {
			scrollBox() {
				if ((this.typeData || this.type) == 'center') {
					return `
				
				`;
				}

				return `${[this.typeData || this.type]} : 0px !important;
				${[['top', 'bottom'].includes(this.typeData || this.type) ? 'left' : 'top']} : 0;
				`;
			},
			scrollPopup() {
				//获取页面标签高度
				if ((this.typeData || this.type) == 'center') {
					return `
				top:50%;
				left:50%;
				opacity: ${this.isShow ? '1' : '0'};
				transform: ${this.isShow ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0)'};
				width: ${this.isShow ? this.width : 'auto' } ;
				height: ${this.isShow ? this.height : 'auto' };
				max-width:100%;
				max-height:100%;
				border-radius: ${this.getRadius()};
				background:${this.bgColor};
				`;
				}


				return `${[this.typeData || this.type]} : ${this.isShow ? '0px !important' : '-100vh'};
				max-width:100%;
				max-height:100%;
				width: ${['top', 'bottom'].includes(this.typeData || this.type) ? '100%' : this.width}; 
				height: ${['top', 'bottom'].includes(this.typeData || this.type) ?this.height : '100%'};
				${[['top', 'bottom'].includes(this.typeData || this.type) ? 'left' : 'top']} : 0;
				padding-bottom: ${this.safeArea && (this.typeData || this.type) == 'bottom' ? 'env(safe-area-inset-bottom)' : '0px'};
				background:${this.bgColor};
				border-radius: ${this.getRadius()};
				opacity: 1;
				`;
			},
		},
		mounted() {
			// #ifdef H5
			document.querySelector('.scroll-popup').addEventListener('touchmove', function(event) {
				event.preventDefault();
			}, {
				passive: false
			});

			document.querySelector('.scroll-mask').addEventListener('touchmove', function(event) {
				event.preventDefault();
			}, {
				passive: false
			});
			// #endif
		},

		methods: {
			getRadius() {
				var status = this.typeData || this.type;
				if (status == 'left') {
					return `0 ${this.radius} ${this.radius} 0`;
				}
				if (status == 'right') {
					return `${this.radius} 0 0 ${this.radius}`;
				}
				if (status == 'top') {
					return `0 0  ${this.radius} ${this.radius}`;
				}
				if (status == 'bottom') {
					return `${this.radius} ${this.radius} 0 0 `;
				}
				if (status == 'center') {
					return `${this.radius}`;
				}
			},
			open(type) {
				if (type && this.animation) console.warn('如果您传入了参数，则不会开启动画')
				this.typeData = type;
				this.isShow = true;
				this.$emit('open');
			},
			close() {
				this.isShow = false;
				this.$emit('close');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.scroll-animation {
		transition: all 0.15s ease 0s;
		opacity: 0;
	}

	/* 遮罩层样式 */
	.scroll-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
		overflow: hidden;
	}

	.scroll-popup {
		position: fixed;
		z-index: 999;
		overflow: hidden;
	}

	.scroll-box {
		position: relative;
		overflow: hidden;
	}

	.popup-box {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 99999999;
		
	}
	
	.popup-box .close-btn{
	    position: absolute;
	    right: 24rpx;
	    top: 24rpx;
	    width: 32rpx;
	    height: 32rpx;
	    z-index: 999;
	}
	
	.popup-box .close-btn image{
		display: block;
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid silver;
		border-radius: 100rpx;
		padding: 12rpx;
		margin-left: -30rpx;		
	}
	
</style>
